<template>
<div class="order-pay">
  <c-header :title="'订单支付'"></c-header>
  <van-cell-group>
    <van-cell title="罗总    13520145256" icon="location" is-link  label="广东省深圳市宝安区西乡街智谷中心H座1101" class="order-addrss-hd" @click="openPanel2"/>
  </van-cell-group>
  <van-panel class="order-pay-pro" title="未来社区自营店">
    <van-card title="剑南春 水晶剑 52度 单瓶装白酒 500ml 口感浓香型" desc="浓香型" num="2" price="2.00" :thumb="imageURL" />
    <van-card title="剑南春 水晶剑 52度 单瓶装白酒 500ml 口感浓香型" desc="浓香型" num="2" price="2.00" :thumb="imageURL" />
    <!-- <div slot="footer">
      <van-button size="small">按钮</van-button>
      <van-button size="small" type="danger">按钮</van-button>
    </div> -->
    <van-cell title="配送方式" value="包邮" />
    <van-field v-model="message" label="留言" type="textarea" placeholder="请输入留言" rows="1" autosize />
  </van-panel>

  <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
    <span slot="tip">您的收货地址无法送送达 <span class="modify-address">请修改地址</span>
    </span>
  </van-submit-bar>
  <!-- 没有商品 -->
  <div class="empt" v-show="isEmpt">
    <img src='../../assets/images/cart/empt.jpg' />
    <span>购物车肚子空空</span>
    <van-button size="small" @click="$router.push({path: '/home'})">去逛逛</van-button>
  </div>
  <!-- 支付面板 -->
  <pay-panel :showPay="showPay" :showKeyboard="showKeyboard"  @closePanel="closePanel" @openPanel="openPanel" @openPayTypePanel="openPayTypePanel"
   @closePayTypePanel = "closePayTypePanel"></pay-panel>
  <!-- 支付方式选择 -->
  <pay-type-panel :showPayType="showPayType" @openPanel="openPanel" @closePayTypePanel="closePayTypePanel"></pay-type-panel>
  <!-- 收货地址列表面板 -->
  <address-list-panel :showPanel2="showPanel2"  @closePanel2="closePanel2"></address-list-panel>
</div>
</template>
<script>
export default {
  data() {
    return {
      isEmpt: false,
      message: '',
      value: '',
      showPay: false, // 是否显示支付面板
      showPayType:false, // 是否显示支付方式面板
      showKeyboard: false, // 是否显示密码输入面板
      showPanel2: false, // 是否显示收货地址列表
      imageURL: 'https://m.360buyimg.com/n12/jfs/t6214/49/368477431/462778/ead8e3db/593e0a7aN037e4adf.jpg!q70.jpg'
    }
  },
  methods: {
    // 提交订单
    onSubmit() {
      this.showPay = true
      this.showKeyboard = true
      // this.$router.push({path: '/payType'})
    },
    // 打开支付面板
    openPanel () {
      this.showPay = true
      this.showKeyboard = true
    },
    // 关闭支付面板
    closePanel() {
      this.showPay = false
      this.showKeyboard = false
    },
    // 打开支付方式面板
    openPayTypePanel() {
      this.showPayType = true
    },
    // 关闭支付方式面板
    closePayTypePanel () {
      this.showPayType = false
    },
    // 打开地址列表面板
    openPanel2() {
      this.showPanel2 = true
    },
    // 关闭地址列表面板
    closePanel2() {
      this.showPanel2 = false
    }
  }
}
</script>
<style lang="scss" >
@import '../../assets/styles/common.scss';
.order-pay {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f2f2f2;
    overflow-y: scroll;
    margin-bottom: 90px;
    .order-addrss-hd {
        padding: px2rem(5px) px2rem(20px) px2rem(20px);
        line-height: px2rem(60px);
    }
    &-pro {
        margin-top: px2rem(10px);
    }
    .empt {
        margin: auto;
        text-align: center;
        vertical-align: middle;
        img {
            margin: auto;
            width: px2rem(80px);
            height: auto;
        }
    }
    .modify-address{
      color: #1a961f;
    }
}
.van-checkbox__input {
    float: right;
    position: static;
}
</style>
